<template>
    <scroll-view 
        :scroll-y="true"
        class="add_ylk_view">
        <view class="container">
            <u-form 
                :model="form" 
                ref="uForm" 
                label-width="fit-content">
                <u-form-item 
                    label="姓名"
                    prop="name">
                    <u-input v-model="form.name" />
                </u-form-item>
                <u-form-item label="年龄" prop="age">
                    <u-input v-model="form.age" />
                </u-form-item>
                <u-form-item label="性别" prop="sex">
                    <SelectSexInputCp
                        v-model="form.sex">
                    </SelectSexInputCp>
                </u-form-item>
                <u-form-item label="身份证号" prop="idcardNo" label-width="150">
                    <u-input v-model="form.idcardNo" />
                </u-form-item>
                <u-form-item label="地址" prop="address">
                    <u-input v-model="form.address" />
                </u-form-item>
                <u-form-item label="电话" prop="phone">
                    <u-input v-model="form.phone" />
                </u-form-item>
                <u-form-item label="民族" prop="nation">
                    <SelectEthnicInputCp
                        v-model="form.nation">
                    </SelectEthnicInputCp>
                </u-form-item>
                <u-form-item label="婚姻状况" prop="Marriage" label-width="150">
                    <SelectHunYinCp
                        v-model="form.Marriage">
                    </SelectHunYinCp>
                </u-form-item>
                <u-form-item label="文化" prop="cultrue">
                    <SelectCultureInputCp
                        v-model="form.cultrue">
                    </SelectCultureInputCp>
                </u-form-item>
                <u-form-item label="职业" prop="work">
                    <SelectJobInputCp
                        v-model="form.work">
                    </SelectJobInputCp>
                </u-form-item>
                <u-form-item label="邮编" prop="postcode">
                    <u-input v-model="form.postcode" />
                </u-form-item>
                <u-form-item label="出生日期" prop="birthday" label-width="150">
                    <SelectDateInputCp
                        v-model="form.birthday">
                    </SelectDateInputCp>
                </u-form-item>
                <view class="bt_list">
                    <u-button 
                        type="success"
                        :loading="loading"
                        @click="onAdd">
                        注册
                    </u-button>
                </view>
            </u-form>
            <u-toast ref="uToast" />
        </view>
    </scroll-view>
</template>

<script>
//添加医疗卡视图
import SelectDateInputCp from "@/components/public/SelectDateInput";
import SelectSexInputCp from "@/components/public/SelectSexInput";
import SelectCultureInputCp from "@/components/public/SelectCultureInput";
import SelectEthnicInputCp from "@/components/public/SelectEthnicInput";
import SelectJobInputCp from "@/components/public/SelectJobInput";
import SelectHunYinCp from "@/components/public/SelectHunYin.vue";
import {addCard} from "@/common/api"
export default {
    components:{
        SelectDateInputCp,
        SelectSexInputCp,
        SelectCultureInputCp,
        SelectEthnicInputCp,
        SelectJobInputCp,
        SelectHunYinCp,
    },
    data() {
        return {
            loading:false,
            form: {
                name: '',
                age: '',
                address: '',
                phone: '',
                nation: '',
                cultrue: '',
                work: '',
                postcode: '',
                birthday: '',
                idcardNo: '',
                sex: '',
                Marriage:'',
            },
            //数据验证规则
            rules:{
            	name:[
            		{
            			required: true,
            			message: '不能为空',
            			trigger: ['blur', 'change'],
            		},
            	],
                age:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],
                address:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                phone:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                nation:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                cultrue:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                work:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                postcode:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                birthday:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                idcardNo:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                sex:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
                Marriage:[
                	{
                		required: true,
                		message: '不能为空',
                		trigger: ['blur', 'change'],
                	},
                ],  
            },
        }
    },
    onReady() {
        //写入数据检验规则
    	this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        onAdd(){  //添加数据
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    addCard(
                        this.form,
                    ).then(data=>{
                        this.$refs.uToast.show({
                            title: "成功",
                            position:'top',
                            type: 'success',
                        });
                        //成功后返回上一个页面
                        setTimeout(()=>{
                            uni.navigateBack();
                        },1000);
                    }).finally(()=>{
                        this.loading = false;
                    }).catch(msg=>{
                        this.$refs.uToast.show({
                            title: msg,
                            position:'top',
                            type: 'error',
                        });
                    });
                }
            });
        },
    },
}
</script>
<style scoped lang="scss">
    .add_ylk_view{
        height: calc(100vh);
        .container{
            padding: 35rpx;
            box-sizing: border-box;
            .bt_list{
                margin-top: 35rpx;
            }
        }
    }
</style>
